<template>
	<view class="container">
		<view class="main_plate" style="margin: 20rpx 30rpx 0 30rpx;">
			<view @click="changePart(1)" :class="chosePart == 1 ? 'grid_part grid_active' : 'grid_part'">小组成员</view>
			<view @click="changePart(2)" :class="chosePart == 2 ? 'grid_part grid_active' : 'grid_part'">小组佣金</view>
			<view @click="changePart(3)" :class="chosePart == 3 ? 'grid_part grid_active' : 'grid_part'">开始邀请</view>
		</view>
		
		<view class="tab-bar" v-show="chosePart == 1">
			<view class="group_people">
				<view class="group_item">
					<img class="group_img" src="@/static/images/ui-42/1.png"/>
					<view>
						<view class="group_count">{{teamInfo.subordinateCount}}</view>
						<view class="group_tit">总注册人数</view>
					</view>
				</view>
				<view class="group_item">
					<img class="group_img" src="@/static/images/ui-42/2.png"/>
					<view>
						<view class="group_count">{{teamInfo.todayauth}}</view>
						<view class="group_tit">直推实名人数</view>
					</view>
				</view>
				<view class="group_item">
					<img class="group_img" src="@/static/images/ui-42/3.png"/>
					<view>
						<view class="group_count">{{teamInfo.todayfirstrecharge}}</view>
						<view class="group_tit">有效充值人数</view>
					</view>
				</view>
				<view class="group_item">
					<img class="group_img" src="@/static/images/ui-42/4.png"/>
					<view>
						<view class="group_count">{{teamInfo.todayreg}}</view>
						<view class="group_tit">直推注册人数</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tab-bar" v-show="chosePart == 1">
			<view class="title-1">小组成员</view>
			<view class="main_plate2">
				<view @click="checkIndex(0)" :class="choseLevel == 0 ? 'grid_part2 grid_active2' : 'grid_part2'">今日（{{ todayCount }}）</view>
				<view @click="checkIndex(1)" :class="choseLevel == 1 ? 'grid_part2 grid_active2' : 'grid_part2'">一级（{{ memberCount1 }}）</view>
				<view @click="checkIndex(2)" :class="choseLevel == 2 ? 'grid_part2 grid_active2' : 'grid_part2'">二级（{{ memberCount2 }}）</view>
				<view @click="checkIndex(3)" :class="choseLevel == 3 ? 'grid_part2 grid_active2' : 'grid_part2'">三级（{{ memberCount3 }}）</view>
			</view>
			
			<view v-show="choseLevel == 0">
				<view class="group-1" v-if="todayList.length > 0">
					<view v-for="(item,index) in todayList">
						<view class="tab_item">
							<view class="tab_con1">
								<view class="con_tel">{{item.nickname}}</view>
								<view class="con_money">总充值：{{item.allrecharge}}</view>
								<view class="con_money">总提现：{{item.allcash}}</view>
							</view>
							<view class="tab_con2">
								<view class="con_sm" :class="{ 'auth-green': item.auth === 1, 'auth-gray': item.auth === 0 }">
									{{ item.auth === 1 ? '已实名' : '未实名' }}
								</view>
								<view class="con_level">{{item.level}}</view>
								<view class="con_tixian">总推荐：{{item.team_size}}</view>
								<view class="con_tixian">总收益：{{item.income}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="con_nomore">
					<image class="con_nomore_img" src="/static/images/bg_nodata.png" :lazy-load="true" />
					<view class="con_nomore_tit">没有更多了</view>
				</view>
			</view>
			<view v-show="choseLevel == 1">
				<view class="group-1"  v-if="memberListLevel1.length > 0">
					<view  v-for="(item,index) in memberListLevel1">
						<view class="tab_item">
							<view class="tab_con1">
								<view class="con_tel">{{item.nickname}}</view>
								<view class="con_money">总充值：{{item.allrecharge}}</view>
								<view class="con_money">总提现：{{item.allcash}}</view>
							</view>
							<view class="tab_con2">
								<view class="con_sm" :class="{ 'auth-green': item.auth === 1, 'auth-gray': item.auth === 0 }">
									{{ item.auth === 1 ? '已实名' : '未实名' }}
								</view>
								<view class="con_level">{{item.level}}</view>
								<view class="con_tixian">总推荐：{{item.team_size}}</view>
								<view class="con_tixian">总收益：{{item.income}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="con_nomore">
					<image class="con_nomore_img" src="/static/images/bg_nodata.png" :lazy-load="true" />
					<view class="con_nomore_tit">没有更多了</view>
				</view>
			</view>
			<view v-show="choseLevel == 2">
				<view class="group-1"  v-if="memberListLevel2.length > 0">
					<view  v-for="(item,index) in memberListLevel2">
						<view class="tab_item">
							<view class="tab_con1">
								<view class="con_tel">{{item.nickname}}</view>
								<view class="con_money">总充值：{{item.allrecharge}}</view>
								<view class="con_money">总提现：{{item.allcash}}</view>
							</view>
							<view class="tab_con2">
								<view class="con_sm" :class="{ 'auth-green': item.auth === 1, 'auth-gray': item.auth === 0 }">
									{{ item.auth === 1 ? '已实名' : '未实名' }}
								</view>
								<view class="con_level">{{item.level}}</view>
								<view class="con_tixian">总推荐：{{item.team_size}}</view>
								<view class="con_tixian">总收益：{{item.income}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="con_nomore">
					<image class="con_nomore_img" src="/static/images/bg_nodata.png" :lazy-load="true" />
					<view class="con_nomore_tit">没有更多了</view>
				</view>
			</view>
			<view v-show="choseLevel == 3">
				<view class="group-1" v-if="memberListLevel3.length > 0">
					<view  v-for="(item,index) in memberListLevel3">
						<view class="tab_item">
							<view class="tab_con1">
								<view class="con_tel">{{item.nickname}}</view>
								<view class="con_money">总充值：{{item.allrecharge}}</view>
								<view class="con_money">总提现：{{item.allcash}}</view>
							</view>
							<view class="tab_con2">
								<view class="con_sm" :class="{ 'auth-green': item.auth === 1, 'auth-gray': item.auth === 0 }">
									{{ item.auth === 1 ? '已实名' : '未实名' }}
								</view>
								<view class="con_level">{{item.level}}</view>
								<view class="con_tixian">总推荐：{{item.team_size}}</view>
								<view class="con_tixian">总收益：{{item.income}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="con_nomore">
					<image class="con_nomore_img" src="/static/images/bg_nodata.png" :lazy-load="true" />
					<view class="con_nomore_tit">没有更多了</view>
				</view>
			</view>
		</view>
		
		<view class="tab-bar" v-show="chosePart == 2">
			<view class="commiss">
				<view class="coms_money">{{teamInfo.allinvest}}</view>
				<view class="coms_tit">总佣金（元）</view>
				<view style="display: flex;">
					<view class="coms_info">今日佣金：<span>{{teamInfo.todayinvest}}</span></view>
					<view class="coms_info">本月佣金：<span>{{teamInfo.monthInvest}}</span></view>
				</view>
			</view>
		</view>
		
		<view class="tab-bar" v-show="chosePart == 3">
			<view class="commiss">
				<view class="coms_tit">我的邀请码</view>
				<view class="coms_money">{{ code }}</view>
				
				<view class="coms_copy" @click="copy">点击复制</view>
			</view>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				user_bg: '',
				avatar: '/static/icon_avatar.png',
				userinfo: [],
				teamInfo: [],
				todayList:[],
				memberListLevel1:[],
				memberListLevel2:[],
				memberListLevel3:[],
				todayCount: 0,
				memberCount1: 0,
				memberCount2: 0,
				memberCount3: 0,
				inviteList: [],				
				list: [],
				ifOnShow: false,
				chosePart: 1,
				choseLevel: 0,
				choseCommission: 1,
				code: '',
				page:1,
				lastPage: 0,
				loadMoreText: "加载中...",
				showLoadMore: false,
				current: 1	
			};
		},
		onHide() {
			this.ifOnShow = true
		},
		onShow() {
			if (this.ifOnShow) {
				this.getData();
			}
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
		},
		onLoad: function(option) {
			this.getData();
		},
		onReachBottom() {
			 console.log("onReachBottom");
			if (this.page > this.lastPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				this.showLoadMore = true;
				setTimeout(() => {
					this.changeLevel(this.level);
				}, 300);
			}
		},
		methods: {
			//user数据
			getData(){

				var info = uni.getStorageSync("userinfo");
				console.log('进入getData')
				if(info.token){
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
					this.helper.req({
						api:"getTeamInfo",
						timestamp:timestamp,
						data:{username:info.username,token:info.token},
						header:{sign:sign},
						method:'GET',
					}).then(res=>{
							var level = res.data.data.teamList.total
							this.teamInfo = res.data.data.teamInfo
							this.todayCount = this.teamInfo.todaySubordinates
							this.memberCount1 = level.level1;
							this.memberCount2 = level.level2;
							this.memberCount3 = level.level3;
							uni.hideLoading();
					})
					
					this.helper.req({
						api: "getUserInfo",
						timestamp: timestamp,
						data: {
							username: info.username,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						
						this.userinfo = res.data.data.userinfo;
						this.code = this.userinfo.invite_code
						console.log('邀请码:', this.code)
						if (this.userinfo.avatar) {
							this.avatar = this.weburl + this.userinfo.avatar;
						}
						setTimeout(() => {
							uni.hideLoading();
						}, 300);
					})
				}else{
					uni.hideLoading();
				}
			},
			navToUrl: function(url) {
				console.log('url:',url)
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			},
			changePart: function(type){
				console.log('type:',type)
				this.chosePart = type
			},
			checkIndex(index) {
				this.page = 1,
				this.lastPage = 0,
				this.todayList=[],
				this.memberListLevel1=[],
				this.memberListLevel2=[],
				this.memberListLevel3=[],
				// console.log('index',index)
				// this.navIndex = index;
				this.changeLevel(index)
			},			
			changeLevel: function(index){
				console.log('进入changeLevel')
				var level = 0;
				if(index== 0){
					level = 0;
				}
				if(index == 1){
					level = 1;
				}else if(index == 2){
					level = 2;
				}else if(index == 3){
					level = 3;
				}
				this.choseLevel =level
				this.level = level
				let page = this.page;
				console.log("level:",level)
				var info = uni.getStorageSync("userinfo");
				if(info.token){
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp,'level='+level,'page='+page]);
					this.helper.req({
						api:"getTeamInfo",
						timestamp:timestamp,
						data:{username:info.username,token:info.token,level:level,page:page},
						header:{sign:sign},
						method:'GET',
					}).then(res=>{
						var memberList = res.data.data.teamList.customers.data
						var levelcount = res.data.data.teamList.total
						let current_page = res.data.data.teamList.customers.current_page;
						let last_page = res.data.data.teamList.customers.last_page;
						this.page = current_page + 1;
						this.lastPage = last_page;
						if (index == 0){
						this.todayCount = res.data.data.teamInfo.todaySubordinates;
						this.todayList = this.todayList.concat(memberList);
						}else if(index == 1){
							this.memberListLevel1 = this.memberListLevel1.concat(memberList);
							this.memberCount1 = levelcount.level1;
						}else if(index == 2){
							console.log('进入到memberListLevel2了')
							this.memberListLevel2 = this.memberListLevel2.concat(memberList);
							this.memberCount2 = levelcount.level2;
						}else if(index == 3){
							this.memberListLevel3 = this.memberListLevel3.concat(memberList);
							this.memberCount3 = levelcount.level3;
						}
						uni.hideLoading();
					})
				}else{
					uni.hideLoading();
				}
			},
			changeCommission: function(type){
				this.choseCommission = type
			},
			copy:function(){
				let code = this.code
				console.log('复制内容：',code)
				uni.setClipboardData({
					data: code,
					success: function () {
						uni.showToast({
							title: '已复制到剪切板',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	page, .container {
		color: #56595d;
		background-color: #ddeafd;
	}
	.main_plate2{
		background: url("@/static/images/ui-42/5.png");
		background-size: 100% 100%;
		display: flex;
	}
	.grid_part2{
		text-align: center;
		font-size: 28rpx;
		line-height: 42rpx;
		padding: 22rpx 0;
		color:#353535;
		flex: 1;
		position: relative;
	}
	.grid_active2{
		color: #4f8dfd;
		font-size: 34rpx;
	}
	.grid_active2::after{
		content: '';
		position: absolute;
		bottom: 10rpx;
		left: calc(50% - 15rpx);
		width: 30rpx;
		height: 8rpx;
		border-radius: 5rpx;
		background: #4f8dfd;
	}
	.main_plate{
		background: url("@/static/images/ui-20/bar-bg.png");
		background-size: 100% 100%;
		display: flex;
	}
	.grid_part{
		text-align: center;
		font-size: 28rpx;
		padding: 22rpx 0;
		color:#353535;
		flex: 1;
	}
	.grid_active{
		color: #4f8dfd;
		background: url("@/static/images/ui-20/active.png") no-repeat bottom;
		background-size: 100% 100%;
	}
	.grid_active:first-child{
		color: #4f8dfd;
		background: url("@/static/images/ui-20/left.png") no-repeat bottom;
		background-size: 100% 100%;
	}
	.grid_active:last-child{
		color: #4f8dfd;
		background: url("@/static/images/ui-20/right.png") no-repeat bottom;
		background-size: 100% 100%;
	}
	.tab-bar {
		margin: 0 30rpx;
		.item_image{
			padding: 4vw;
			float: left;
			image{
				width: 28vw;
				height: 28vw;
			}
		}
		.item_r{
			float: right;
			width: 60vw;
			height: 36vw;
			padding: 4vw 2vw 4vw 0;
			color:#fff;
			.item_tit{
				line-height: 40px;
				font-size: 18px;
				font-weight: bold;
				width: 58vw;
				height: 40px;
				overflow: hidden;
			}
			.item_contain{
				line-height: 22px;
				font-size: 15px;
				width: 58vw;
				height: 50px;
				overflow: hidden;
			}
			.item_date{
				line-height: 24px;
				font-size: 14px;
				width: 58vw;
				text-align: right;
			}
		}
		.group-1 {
			background: rgb(243, 248, 255);
			color: rgb(86, 89, 93);
		}
		.tab_item{
			padding: 3vw;
			display: flex;
			.tab_con1{
				width: 50%;
				height: 80px;
				padding: 4px 0 2px 10px;
				text-align: left;
				color:#fff;
				.con_tel{
					width: 100%;
					line-height: 25px;
					font-size: 16px;
					margin-bottom: 4px;
					color: rgb(86, 89, 93);
					
				}
				.con_money{
					width: 100%;
					line-height: 26px;
					font-size: 14px;
					color: rgb(86, 89, 93);
				}
			}
			.tab_con2{
				width: 50%;
				height: 80px;
				color:#fff;
				padding: 4px 10px 2px 0;
				text-align: right;
				.con_tixian{
					width: 100%;
					line-height: 26px;
					font-size: 14px;
					color: rgb(86, 89, 93);
					display: inline-block;
				}
				
				.con_level{
					width: 16vw;
					line-height: 20px;
					text-align: center;
					font-size: 12px;
					border: 0.5px solid #4188ff;
					color:#4188ff;
					border-radius: 20px;
					margin: 2px 0 4px;
					float: right;
					margin-right: 10rpx;
				}
				.con_sm{
					width: 16vw;
					line-height: 20px;
					text-align: center;
					font-size: 12px;
					border: 0.5px solid #7AE6FF;
					color:#7AE6FF;
					border-radius: 20px;
					margin: 2px 0 4px;
					float: right;
				}
				.auth-green {
				  background-color: green;
				  color: white; /* 可选：设置文本颜色为白色 */
				}
				
				.auth-gray {
				  background-color: gray;
				  color: white; /* 可选：设置文本颜色为黑色 */
				}	
			}
		}
		
		.commiss{
			background: #f3f8ff;
			text-align: center;
			padding: 20rpx;
			border-radius: 0 0 30rpx 30rpx;
			.coms_tit{
				line-height: 8vw;
				font-size: 16px;
			}
			.coms_money{
				font-size: 28px;
				font-weight: bold;
				color:#4188ff;
			}
			.coms_info{
				padding: 50rpx 0;
				flex: 1;
				font-size: 28rpx;
				text-align: center;
			}
			.coms_copy{
				width: 40vw;
				height: 10vw;
				line-height: 10vw;
				font-size: 15px;
				text-align: center;
				color: #363536;
				border: 1px solid #363536;
				border-radius: 6vw;
				margin: 50rpx auto;
			}
		}
	}
	
	.group_people{
		background: #f3f8ff;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		border-radius: 0 0 30rpx 30rpx;
		
		.group_item{
			width: 50%;
			text-align: left;
			display: flex;
			align-items: end;
			justify-content: center;
			gap: 10rpx;
			padding:40rpx 0;
			color: #4f8efc;
			.group_img{
				width: 40rpx;
			}
			.group_count{
				width: 180rpx;
			}
		}
	}
	.title-1 {
		padding: 30rpx 0;
		font-size: 30rpx;
		color: #4f8efc;
		display: flex;
		gap: 20rpx;
		align-items: center;
	}
	.title-1::before {
		content: '';
		display: block;
		background: #4f8efc;
		width: 10rpx;
		height: 30rpx;
		border-radius: 10rpx;
	}

	.grid_chose{
		width: 40px;
		height: 6px;
		background: #7AE6FF;
		border-radius: 4px;
		margin: 0 30px;
	}
	.con_nomore{
		text-align: center;
	}
	
	.con_nomore_img{
		width: 8.96rem;
		height: 5.73rem;
		margin-top: 15vw;
	}
	.con_nomore_tit{
		line-height: 40px;
		font-size: 14px;
		margin-top: 20px;
		color:#999;
	}
</style>